<template>
    <div>
        <TabBar title="精彩分类"/>
        <div class="sort_list">
            <mu-container>
                <mu-card style="width:47%; margin:3% 1% 0 1%;float:left;"   v-for="item in listData" @click="enterSortDetails(item.data.id)">
                    <mu-card-media :sub-title="item.data.title" class="titleCard">
                        <img  :src="item.data.icon" class="imgCard">
                    </mu-card-media>
                </mu-card>
            </mu-container>
        </div>
    </div>

</template>

<script>
    import TabBar from '@/components/home/headNav'
    export default {
        name: "sortArea",
        components:{
            TabBar
        },
        data(){
            return {
                listData:[],
                videoTitle:''
            }
        },
        methods:{
             getSortList(){
                 let _self =this;
                 this.$axios({
                     method:'get',
                     url:'https://api.apiopen.top/videoCategory',
                     data:this.qs.stringify({    //这里是发送给后台的数据

                     })
                 }).then((response) =>{
                     let _self = this;
                     _self.listData = response.data.result.itemList;
                     console.log(_self.listData);

                 }).catch((error) =>
                     console.log(error)       //请求失败返回的数据
                 )
             },
            enterSortDetails(Id){
                 let _self = this;
                _self.$router.push({
                    path:'/sortDetails',
                    name:'sortDetails',
                    params:{
                        sortId:Id
                    }
                })
            }
        },
        created() {

        },
        mounted() {
            this.getSortList();
            let _self = this;
            _self.videoTitle ="分类";
        }


    }
</script>

<style >

.sort_list{
    width:100%;
    height:auto;
    float:left;
    padding:0% 0%;
    margin:46px 0 80px 0;
}
.titleCard{
    width:100%;
    padding:0;
    margin:0;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.imgCard{
    width:100%;
    height:120px;
    border-radius:10px;
}
</style>